<template>
  <div class="login">
    <div class="login-form">
      <!--顶部标题-->
      <h1 class="title">xx后台管理系统</h1>
      <!--切Tabs-->
      <div class="tabs">
        <el-tabs v-model="activeName" type="border-card" stretch>
          <el-tab-pane label="帐号登录" name="account">
            <template #label>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>帐号登录</span>
            </template>
            <LoginAccount ref="accountRef" />
          </el-tab-pane>

          <el-tab-pane label="手机登录" name="phone">
            <template #label>
              <el-icon>
                <Iphone />
              </el-icon>
              <span>手机登录</span>
            </template>
            <LoginPhone ref="phoneRef" />
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--底部区域-->
      <div class="controls">
        <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
        <el-link type="primary" style="text-decoration: none;">忘记密码</el-link>
      </div>

      <el-button class="login-btn" type="primary" @click="handleLogin" size="large">
        立即登录
      </el-button>
    </div>
  </div>


</template>

<script setup>
import LoginAccount from '@/views/login/LoginAccount.vue'
import LoginPhone from '@/views/login/LoginPhone.vue'
import { ref } from 'vue'

const activeName = ref('account')
const isRemPwd = ref(false)
const accountRef = ref()
const phoneRef = ref()

// 登录方法
const handleLogin = () => {
  if (activeName.value === 'account') {
    //1.获取子组件账号登录的实例
    accountRef.value.loginActive()

    //2.调用子组件的方法
    console.log('账号登录中')
  } else {

    //1.获取子组件的实例
    phoneRef.value.loginHandler()

    //2.调用子组件的方法

    console.log('手机登录中')
  }
}
</script>

<style scoped>
.login {
  height: 100%;
  width: 100%;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  background: rgb(239, 251, 255) url(/src/assets/background.svg) repeat-x 50%;
}

.login-form {
  width: 350px;

}

.title {
  text-align: center;
  margin-bottom: 20px;
  color: #409eff;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.login-btn {
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
}

.el-icon {
  margin-right: 5px;
}

</style>